<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>练习5：QQ彩贝导航</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			@keyframes shanchu{
				0%{ width: 0px;
				}
				100%{width: 64px;
				}
			}
			.clearfix:after {
				display: table;
				content: "";
				clear: both;
			}
			a{
				color: black;
				text-decoration: none;
				margin-right: 10px;
			}
			.box {
				width: 100%;
				margin: 20px auto;
				height: 60px;
				background-image: linear-gradient(white, #ececec);
			}	
			.box1{
				float: left;
				height: 60px;
				line-height: 60px;
				margin-left: 20px;
			}
			.box1 img{
				vertical-align: middle;
			}
			.box2{
				float: left;
				margin-left: 50px;
				height: 60px;
				width: 600px;
				line-height: 60px;
				position: relative;
			}
			.box3{
				float: left;
				margin-left: 20px;
				height: 60px;
				line-height: 60px;
			}
			.box3 img{
				vertical-align: middle;
			}
			li{
				list-style: none;
				display: inline-block;
			}
			.icon1{
				width: 38px;
				height: 23px;
				background: url(image/header_03.png) no-repeat;
				position: absolute;
				top: -6px;
				left: 10px;
			}
			.icon2{
				width: 38px;
				height: 23px;
				background: url(image/header_07.png) no-repeat;
				position: absolute;
				top: -6px;
				left: 180px;
			}
		   li:hover .icon1{
				animation: shanchu .6s linear both ;
				background: url(image/header_05.png) 0 0 no-repeat;
			}
			.box3 img{
					margin-right: 5px ;
					transition: all .3s;
			}
			.box3 img:hover{
				transform: rotate(360deg);
			}
			li:hover .icon2{
				animation: shanchu .6s linear both ;
				background: url(image/header_09.png) 0 0 no-repeat;
			}
		</style>
	</head>
	<body>
		<div class="box clearfix">
				<div class="box1">
					<img src="image/logo_170x46.png" />
				</div>
				<div class="box2">
					<ul>
						<li>
							<a href="#">返回商城<div class="icon1"></div></a>|</li>
						<li>
							<a href="#">商旅频道</a>|</li>
						<li>
							<a href="#">积分商城<div class="icon2"></div></a>|</li>
						<li>
							<a href="#">商旅频道</a>|</li>
						<li>
							<a href="#">了解彩贝</a>|</li>
						<li>
							<a href="#">彩贝中心</a>|</li>
						<li>
							<a href="#">个人中心</a>|</li>
					</ul>				
				</div>
				<div class="box3">
					<img src="image/iconsB_11.gif" />
					<img src="image/iconsB_12.gif" />
					<img src="image/iconsB_13.png" />
				</div>
		</div>
	</body>
</html>

